import { View, Text, Button } from "@tarojs/components";
import { useLoad } from "@tarojs/taro";
import "./index.scss";
import Taro from "@tarojs/taro";
import { useSelector, useDispatch } from "react-redux";
import { useEffect } from "react";
import { listSlice } from "../../store/slice/listSlice";

export default function Index() {
  useLoad(() => {
    console.log("Page loaded.");
  });
  const dispatch = useDispatch();
  const { list: data } = useSelector((state: any) => {
    console.log(state.list);
    return state.list;
  });
  useEffect(() => {
    console.log(data);
  }, [data]);

  return (
    <View className="index">
      {data.map((item: any) => (
        <Text key={item.id}>{item.text}1</Text>
      ))}
      <Text>Hello world!</Text>
      <br />
      <Button
        onClick={() => {
          dispatch(
            listSlice.actions.addList({
              id: 1,
              text: "我是新添加的数据",
            })
          );
        }}
      >
        add
      </Button>
      <Button
        onClick={() => {
          Taro.navigateTo({
            url: "/pages/main/main",
          });
        }}
      >
        跳转
      </Button>
    </View>
  );
}
